<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addBaseWorkRecordForm" ref="addBaseWorkRecordRef" :rules="addBaseWorkRecordrules">
            <el-form-item label="工作记录" :label-width="formLabelWidth" prop="detail">
                <el-input v-model="addBaseWorkRecordForm.detail" autocomplete="off" ref="name" disabled
                    placeholder="请填写工作记录"></el-input>
            </el-form-item>
            <el-form-item label="工作时长" :label-width="formLabelWidth" prop="hours" v-if="addBaseWorkRecordForm.id">
                <el-input v-model="addBaseWorkRecordForm.hours" autocomplete="off" ref="name" disabled
                    placeholder="请填写工作时长"></el-input>
            </el-form-item>
            <!-- <el-form-item label="部门id" :label-width="formLabelWidth" prop="departmentId">
                <el-input v-model="addBaseWorkRecordForm.departmentId" autocomplete="off" ref="name"
                    placeholder="请填写部门id"></el-input>
            </el-form-item> -->
            <el-form-item label="部门名称" :label-width="formLabelWidth" prop="departmentName">
                <el-input v-model="addBaseWorkRecordForm.departmentName" autocomplete="off" ref="name" disabled
                    placeholder="请填写部门名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="上报日期" :label-width="formLabelWidth" prop="day">
                <el-input v-model="addBaseWorkRecordForm.day" autocomplete="off" ref="name"
                    placeholder="请填写上报日期"></el-input>
            </el-form-item> -->
            <el-form-item label="工作图片" :label-width="formLabelWidth" prop="images">
                <!-- <el-input v-model="addBaseWorkRecordForm.images" autocomplete="off" ref="name"
                    placeholder="请填写工作图片"></el-input> -->
                <el-image style="width: 100px; height: 100px" :src="images" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                    :preview-src-list="srcList" :initial-index="4" fit="cover" />
            </el-form-item>
            <!-- <el-form-item label="提交人工号" :label-width="formLabelWidth"
                                      prop="teacherNumber">
                            <el-input
                                    v-model="addBaseWorkRecordForm.teacherNumber"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写提交人工号"
                            ></el-input>
                        </el-form-item> -->

            <!-- <el-form-item label="修改时间" :label-width="formLabelWidth" prop="updateTime" v-if="addBaseWorkRecordForm.id">
                <el-input v-model="addBaseWorkRecordForm.updateTime" autocomplete="off" ref="name"
                    placeholder="请填写修改时间"></el-input>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddBaseWorkRecord",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addBaseWorkRecordForm: {
                detail: "",
                hours: "",
                departmentId: "",
                departmentName: "",
                day: "",
                images: "",
                teacherNumber: "",
                teacherName: "",
                createTime: "",
                updateTeacherNumber: "",
                updateTeacher: "",
                updateTime: "",
            },
            // 校验规则
            addBaseWorkRecordrules: {
                detail: vxRule(true, null, "blur"),
                departmentName: vxRule(true, null, "blur"),
                day: vxRule(true, null, "blur"),
                images: vxRule(true, null, "blur"),
                teacherNumber: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
                updateTeacherNumber: vxRule(true, null, "blur"),
                updateTeacher: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getBaseWorkRecordById(id) {
            httpService("/javaApi/baseWorkRecord/queryById", { id: id }, "get").then(
                (data) => {
                    this.addBaseWorkRecordForm = data;
                    console.log(data);
                    this.addBaseWorkRecordForm.images = this.addBaseWorkRecordForm.images.split(',')
                    this.addBaseWorkRecordForm.images = this.addBaseWorkRecordForm.images.filter(item => item != '')
                    this.addBaseWorkRecordForm.images = this.addBaseWorkRecordForm.images.map(item => `http://192.168.9.22:8088/javaApi` + item)
                    // this.addBaseWorkRecordForm.images = this.addBaseWorkRecordForm.images.map(item => `https://wx.zhengzhong.cn` + item)
                    console.log(this.addBaseWorkRecordForm.images);
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addBaseWorkRecordForm.id = "";
            this.addBaseWorkRecordForm.detail = "";
            this.addBaseWorkRecordForm.hours = "";
            this.addBaseWorkRecordForm.departmentId = "";
            this.addBaseWorkRecordForm.departmentName = "";
            this.addBaseWorkRecordForm.day = "";
            this.addBaseWorkRecordForm.images = "";
            this.addBaseWorkRecordForm.teacherNumber = "";
            this.addBaseWorkRecordForm.teacherName = "";
            this.addBaseWorkRecordForm.createTime = "";
            this.addBaseWorkRecordForm.updateTeacherNumber = "";
            this.addBaseWorkRecordForm.updateTeacher = "";
            this.addBaseWorkRecordForm.updateTime = "";
        },
        save() {
            this.$refs.addBaseWorkRecordRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("detail", this.addBaseWorkRecordForm.detail);
                    params.append("hours", this.addBaseWorkRecordForm.hours);
                    // params.append("departmentId", this.addBaseWorkRecordForm.departmentId);
                    params.append("departmentName", this.addBaseWorkRecordForm.departmentName);
                    params.append("day", this.addBaseWorkRecordForm.day);
                    params.append("images", this.addBaseWorkRecordForm.images);
                    if (this.addBaseWorkRecordForm.id) {
                        params.append("id", this.addBaseWorkRecordForm.id);
                        httpService("/javaApi/baseWorkRecord/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getBaseWorkRecordList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/baseWorkRecord/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getBaseWorkRecordList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style></style>